<script setup>
  import {reactive} from 'vue'
      // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力 
    // 3.分类
    // reactive：针对数组/对象，建议已知具体键的使用
  // 创建login响应式对象
  let login = reactive ({
    username: '',
    password: '',
  })
      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)，v-model
  // 商品列表
</script>

<template>
  <!-- 使用v-model绑定对象属性 -->
  <div class="login-box">
    账号：<input type="text" v-model="login.username"><br>
    密码：<input type="text" v-model="login.password"><br>
    <button>重置</button><button>登录</button>
  </div>
</template>

<style scoped>

</style>